<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Google Contacts</title>
<style type="text/css">
#left {
	width: 50%;
	position: absolute;
	left: 0;
}

#right {
	width: 50%;
	position: absolute;
	right: 0;
}




</style>
<script type="text/javascript" src="js/jquery-1.5.1.min.js"></script>

<script>
	function enableCheck(){
		$(':checkbox[name="contactId"]').removeAttr("disabled");
	}
</script>

<script>
$(function(){
	$('#checkAll').click(function(){
		if($(this).attr("checked")){
			$(':checkbox[name="contactId"]').attr("disabled",true);
			$(':checkbox[name="contactId"]').attr("checked",true);
		}else{
			$(':checkbox[name="contactId"]').attr("checked",false);
			$(':checkbox[name="contactId"]').removeAttr("disabled");
		}
	});
});
</script>
</head>
<body>


<%@ include file="./header.jsp"%>
<h1>Google Contacts</h1>
<br>
<form action="./importcontacts" name="myform">
<table name="table">
	<tbody name="tb">
	<tr>
		<th>First Name</th>
		<th>Last Name</th>
		<th>E-mail</th>
		<th align="right">Check All<input type="checkbox" id="checkAll" name="checkAll" value="false" > </th>
	</tr>
	<c:forEach items="${importContacts}" var="contact">
		<tr name="row">
			<td>${contact.value.firstName}</td>
			<td>${contact.value.lastName}</td>
			<td>${contact.value.email}</td>
			<c:choose>
				<c:when test="${not empty contact.value.email}">
					<td align="right"><input type="checkbox" name="contactId"
						value="${contact.value.id}"></td>
				</c:when>
				<c:otherwise>
					<td>Can't import contact.</td>
				</c:otherwise>
			</c:choose>
		</tr>
	</c:forEach>
	<tr>
		<td><input type="submit" value="Import Selected" onclick="enableCheck()"></td>
	</tr>
	</tbofy>
</table>
</form>
</div>
<div class="left">[<a href="./addressbook">Address Book</a>]<br />
[<a href="./home">Home</a>]<br />
</div>
</body>
</html>